<template>
  <div v-if="isShow">
    <div w-full h-114px text-white  text-38rpx flex flex-a-c flex-j-c overflow-hidden class="wrapper">
      砍价商品
    </div>
    <div p-32rpx bg-white v-if="goods.list.length">
      <oneRow :src="`/pages/promotions/bargain/detail?id=${item.id}`" v-for="(item, index) in goods.list" :key="index" :res="item"></oneRow>
    </div>
    <div v-else>
      <empty mt-100rpx></empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { getBargainList } from '@/api/promotion'
import oneRow from '@/components/goods-list/1row-promotion.vue';
import empty from '@/components/empty/index.vue';

const goods = ref<any>({
  list: []
})
const searchForm = ref<{
  pageSize: number
  pageNumber: number,
  promotionStatus: string
}>({
  pageSize: 10,
  pageNumber: 1,
  promotionStatus: "START"
})
const isShow = ref<boolean>(false)

onPullDownRefresh(() => {
  isShow.value = false
  reset()
  init()
})


onReachBottom(() => {
  if (goods.value?.total > searchForm.value.pageNumber * searchForm.value.pageSize) {
    searchForm.value.pageNumber++;
    init()
  }
})

function reset() {
  goods.value.list = []
  searchForm.value.pageNumber = 1
}
async function init() {
  uni.stopPullDownRefresh();
  const res = await getBargainList(searchForm.value);
  isShow.value = true
  if (res.data.success) {
    if (res.data.result.records.length) {
      goods.value.list.push(...res.data.result.records)
    }
    goods.value.total = res.data.result.total
  }
}

onMounted(() => {
  init()
});
</script>

<style scoped lang="scss">
.wrapper {
  background: url('/static/promotions/bg.png');
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  >image {
    width: 188rpx;
    height: 60rpx;
  }

}
</style>
